<template>
  <nav
    class="bg-slate-200 dark:bg-slate-800 text-7xl text-center dark:text-white"
  >
    <span> Dark Mode With Vue </span>
    <button @click="toggleTheme">{{ currentTheme }}</button>
  </nav>

  <main
    class="text-5xl text-center bg-white dark:bg-black h-screen dark:text-white"
  >
    Main
  </main>
</template>

<script setup>
import { ref } from 'vue';

const SUN_ICON = '🔆';
const MOON_ICON = '🌙';
const currentTheme = ref(SUN_ICON);

function toggleTheme() {
  currentTheme.value = currentTheme.value === SUN_ICON ? MOON_ICON : SUN_ICON;

  if (currentTheme.value === MOON_ICON) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}
</script>
